<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<meta http-equiv="Pragma" content="no-cache" >
<meta http-equiv="Cache-Control" content="no-cache" >
<meta http-equiv="Expires" content="-1" >

<link rel="shortcut icon" href="/icon/info.niwota.frames">
<title>E*Frame</title>
<base href="/content/info.niwota.frames/" target="_self" >

<link rel="stylesheet" href="/assets/style/common.css" type="text/css">

<style type="text/css">
.section-title {
	padding-left: 64px; 
	padding-right: 64px; 
	padding-bottom: 16px; 
	clear: left;
	font-size: large;
}

.section {
	padding-left: 64px; 
	padding-right: 64px; 
	clear: left;
}

.frame-item a:link, .frame-item a:visited, .frame-item a:active, .frame-item a:hover {
	text-decoration: none;
	color: #fff;
}

.frame-item a:hover {
	color: #000;
	background-color: orange;
} 

</style>
<link rel="stylesheet" href="/content/info.niwota.frames/assets/opt/galleryview/galleryview.css" type="text/css">

<script type="text/javascript" src="/assets/opt/script/jquery.js"></script>
<script type="text/javascript" src="/assets/script/common.js"></script>

<script type="text/javascript" src="/content/info.niwota.frames/assets/opt/galleryview/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/content/info.niwota.frames/assets/opt/galleryview/jquery.timers-1.2.js"></script>
<script type="text/javascript" src="/content/info.niwota.frames/assets/opt/galleryview/jquery.galleryview-2.1.1.js"></script>

<script type="text/javascript">
var jsonp = '/content/info.niwota.frames/jsonp/frame/';
var spinner = '<img src="/assets/image/spin.gif" alt="Please wait..." ><span style="color: white; font-size: x-large;">...<blink>.....</blink></span>';

$.ajaxSetup ({  
	cache: false  
}); 

//var contextUri = '/content/info.niwota.frames/';
//function loadFrames() {
//	var loadUrl = contextUri+"bin/load/frames";  
//	$("#gallery").html(spinner).load(loadUrl);   
//}

var frames = null;

function loadFrames() {
	var g = $('#gallery');
	g.html(spinner);
	var url = jsonp + 'listFrames';
	$.get(url, function(d) {
	   showFrames(d);
	});
	return false;
}

function showFrames(d) {
	frames = d;
 	var html = '';
	for (var i = 0; i < d.length; i++) {
		var label = d[i];
		html +=  '<li><span class="frame-item"><a onclick="return loadFrame('+ i +');" href="#" >'+label+'</a></span></li>';		
	}
	var g = $('#gallery');
	g.html(html);
}

function loadFrame(i) {
	var g = $('#gallery');
	g.html(spinner);
	var url = jsonp + 'loadFrame?label='+ encodeURIComponent(frames[i]);
	$.get(url, function(d) {
		showFrame(d);
	});
	return false;
}

function showFrame(d) {
	var html = '';
	var dl = d.list;
	var label = d.label;
	for(var i = 0; i < dl.length; i++) {
		var u = dl[i].uri + '?hash=' + dl[i].hash +'&label='+label;
		html += '<li><img src="/content/info.niwota.frames/bin/image?uri='+ encodeURIComponent(u) +'" alt="" /></li>';	
	}
	var g = $('#gallery');
	g.empty();
	g.append(html);  
	g.galleryView();
	/*g.galleryView({
		gallery_width: 800,
		gallery_height: 600,
		frame_width: 120,
		frame_height: 90,
		pause_on_hover: true
	});
	*/
}

$(document).ready(function(){
	$.initOptionMenu();
	loadFrames();
});
</script>

</head>
<body >

<div id="topnav">
	<a class="logo" href="/content/info.niwota.frames/bin/frames">
	<img class="icon32" src="/icon/info.niwota.frames"  alt="E*Frame" >
	<span>E*Frame</span>
	</a>

	<span class="top-right" style="margin-right: 64px;">
	
	<span class="action"><a href="/content/info.niwota.frames/bin/frames">Frames</a></span>&nbsp;|&nbsp;
	<span class="action"><a href="/content/info.niwota.frames/bin/help" target="_help" >Help</a></span>&nbsp;|&nbsp;
	<span class="action"><a href="#" onclick="self.close();">Quit</a></span>

	</span>
	<div>
	<img src="/image/divider_horizontal_light.png" style="vertical-align: bottom; clear: both; display: inline; width: 90%; height: 2px;" />
	</div>
</div>

<!--page content-->
<div id="page-content">

<div class="section"> 

<ul id="gallery">
</ul>

</div>

</div>
<!--//page content-->

<div id="optionmenu">
<a href="/content/info.niwota.frames/bin/frames" title="Frames"><img src="/res/drawable/ic_menu_archive" /></a>
<a href="/content/info.niwota.frames/bin/help" target="_help" title="Help" ><img src="/res/drawable/ic_menu_help" /></a>
<a href="#" title="Quit" onclick="self.close();"><img src="/res/drawable/ic_menu_done" /></a>
</div>

<div id="footer">
<div>
<img src="/image/divider_horizontal_light.png" style="vertical-align: bottom; clear: both; display: inline; width: 90%; height: 2px;" />
</div>
E*Frame &copy; 2.1.0 2010 All rights reserved
</div>

<div id="wallpaper" style="display: block;"><img src="/content/info.niwota.frames/bg.jpg" width="100%" height="100%" /></div>

</body>
</html>